<template>
  <div class="recharge-view">
    <van-nav-bar title="会员充值" left-arrow @click-left="$router.back()" />
    <div class="account-balance">
      <p class="text">帐户余额: <span class="balance-amount">￥0.00</span></p>
    </div>
    <div class="quick-recharge">
      <div>快捷充值</div>
      <van-cell-group>
        <van-cell
          v-for="(item, index) in rechargeOptions"
          :key="index"
          is-link
          @click="handleRecharge(item)"
        >
          <template #title>{{ item.amount }}元</template>
          <template #label>享{{ item.discount }}折</template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="recharge-explanation">
      <p><strong>充值说明</strong></p>
      <p>1、此折扣终身有效;</p>
      <p>
        2、充值金额不累计，一次性充值600元享受终身9折优惠，一次性充值1000元享受终身8.5折优惠，一次性充值2000元享受终身8折优惠(分开充值的默认最高金额所享受的折扣力度，不累计);
      </p>
      <p>
        3、如有任何问题可联系店长微信/电话:<span class="contact-number"
          >1851223520</span
        >
      </p>
      <p>4、最终解释权归心心精洗所有!</p>
    </div>
  </div>
</template>

<script>
import { NavBar, Cell, CellGroup } from "vant";

export default {
  name: "RechargeView",
  components: {
    vanNavBar: NavBar,
    vanCell: Cell,
    vanCellGroup: CellGroup,
  },
  data() {
    return {
      rechargeOptions: [
        { amount: 600, discount: 9 },
        { amount: 1000, discount: 8.5 },
        { amount: 2000, discount: 8 },
      ],
    };
  },
  methods: {
    handleRecharge(item) {
      // Handle recharge logic here
      console.log(
        `Recharging ${item.amount} yuan with a discount of ${item.discount}折`
      );
    },
  },
};
</script>

<style scoped>
.recharge-view {
  padding: 16px;
}
.text{
color: #999;
}
.account-balance {
  margin-bottom: 16px;
  font-size: 34px;
  color: #333;
}

.balance-amount {
  font-weight: bold;
  color: #00a299;
}

.quick-recharge {
  margin-top: 20px;
  margin-bottom: 16px;
}

.recharge-explanation {
  font-size: 24px;
  color: #666;
}

.contact-number {
  color: #00a299;
}
</style>